:root {
	/* Color Palette */
	--color-gray-dark: #999;
	--color-tbbtn-hover: #c0e0c0;
	--color-tbbtn-active: #c0e0c0;

	/*主题色*/
	// --color-old-bg: #d6dbdf;
	// --color-old-bg: white;
	--color-old-bg: #b3e3fa;

	/* --color-old-bg: #FAF9DE;  */
	/* --color-old-bg: #DCE2F1;  */
	/* 
  
    
    /* Width and Height */
	--height-toolbar: 6.2rem;
	--height-studybar: 10rem;
	--height-statusbar: 3.2rem;
}

:root,
:root[theme-mode="light"] {
	/* --color-theme-bg: #e5e5e5; */
	--color-theme-bg: var(--color-old-bg);
	--color-theme-bg-diff: #b9c2c9;
	--color-theme-text: #444;
	--color-tbbtn-hover: #b0d0b0;
	--color-tbbtn-active: #a0c0a0;
	--color-tbbtn-pressed: #f0f0f0;

	--color-hover: #d3e3fd;
	--color-active: #a0c0e0;

	--color-selected-bg: #c0e0c0;
	--color-unselect-bg: #7f7f7f;
	--color-selected-text: #222;
	--color-unselect-text: #222;

	/*study item*/
	--color-study-bg: #d0d5d9;
	--color-study-bg-darker: #b0b2b4;
	--color-study-text: #444;
	--color-border-lt: #555;
	--color-border-rb: #999;
	--color-study-hover: var(--color-hover);
	--color-study-active: #a0c0e0;
	--color-study-active-darker: #85abd4;

	/*Menu*/
	--color-menu-bg: white;
	--color-menu-bar: #d2e3e6;

	/*Table*/
	--color-table-bg: white;
	--color-table-row-hover-bg: var(--color-hover);

	/*Dialog*/
	--color-dialog-header: #eee;
}

:root[theme-mode="dark"] {
	--color-theme-bg: #333;
	--color-theme-bg-diff: #4d4d4d;
	--color-theme-text: #e5e5e5;
	--color-tbbtn-hover: #608060;
	--color-tbbtn-active: #80a080;
	--color-tbbtn-pressed: #777;

	--color-selected-bg: #c0e0c0;
	--color-unselect-bg: #7f7f7f;
	--color-selected-text: #eee;
	--color-unselect-text: #eee;

	/*study item*/
	--color-study-bg: #4c4d4e;
	--color-study-bg-darker: #6e7070;
	--color-study-text: #eee;
	--color-border-lt: #aaa;
	--color-border-rb: #bbb;
	--color-study-hover: var(--color-hover);
	--color-study-active: #537497;
	--color-study-active-darker: #5887b9;

	/*Menu*/
	--color-menu-bg: #333;
	--color-menu-bar: #46575a;

	/*Table*/
	--color-table-bg: #333;
	--color-table-row-hover-bg: #666;

	/*Dialog*/
	--color-dialog-header: #555;
}

*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	box-sizing: border-box;
	font-size: 62.5%; /*10px/16 = 62.5% -> 1rem = 10px*/

	/* 移动端字体大小适配 */
	@media only screen and (max-width: 75em) {
		font-size: 50%;
	}

	/* 平板设备 */
	@media only screen and (max-width: 768px) {
		font-size: 45%;
	}

	/* 手机设备 */
	@media only screen and (max-width: 480px) {
		font-size: 40%;
	}

	/* 超小屏幕手机 */
	@media only screen and (max-width: 320px) {
		font-size: 35%;
	}
}

body {
	overflow-y: hidden;

	/* 移动端优化 */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	/* 防止页面缩放 */
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	text-size-adjust: 100%;

	/* 触摸优化 */
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

/* 移动端通用样式优化 */
@media (max-width: 768px) {
	/* 隐藏滚动条但保持滚动功能 */
	::-webkit-scrollbar {
		width: 0;
		height: 0;
	}

	/* 优化触摸交互 */
	* {
		-webkit-tap-highlight-color: transparent;
	}

	/* 防止文本选择 */
	*:not(input):not(textarea) {
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
}

/* 横屏模式优化 */
@media (orientation: landscape) and (max-width: 768px) {
	html {
		font-size: 35%;
	}
}

/* 高DPI屏幕优化 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	/* 高分辨率屏幕优化 */
}

/* 防止移动端缩放 */
@viewport {
	width: device-width;
	initial-scale: 1;
	maximum-scale: 1;
	user-scalable: no;
}
